<template>
  <view class="Public-account">
    <tabBar v-if="customTabbar === 1 && tabbarTimeout" :nowPages.sync="nowPages" :showSale='showSale'></tabBar>
    <navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
    <onlineService></onlineService>
    <view class="Public-con">
      <!-- 第一屏 -->
      <view class="node0" :style="{height:getIsIpx ? 'calc(100vh - 150rpx)' :'calc(100vh - 120rpx)'}">
        <view class="uni-margin-wraps">
          <swiper class="litha-swiper" :interval="interval" :duration="duration" :autoplay="autoplaySpace"
            :current="lithaSwipperCard" indicator-active-color="#fff" @change="changeLithaSwipper">
            <swiper-item class="swiper-items" v-for="(item,index) in lithaSwipper" :key="index">
              <view style="width: 100%;height: 100%;">
                <image style="width: 100%;" :src="item.swipperImg" mode="widthFix" v-if="isIphoneX">
                  <image style="width: 100%;" :src="item.swipperImg1334" mode="widthFix" v-else>
              </view>
              <view :class="isIphoneX ? 'swipperText1624':'swipperText1334'">
                <image style="width: 100%;" :src="item.swipperText" mode="widthFix">
              </view>
              <view :class="isIphoneX ? 'swipperbtn1624':'swipperbtn1334'" @click="handleSwipperBtn(index)">
                <image style="width: 100%;" :src="item.swipperBtn" mode="widthFix">
              </view>
            </swiper-item>
          </swiper>
          <view :style="{bottom:isIphoneX ? '23%' :'30%'}" class="swipper-uto activebg">
            <view v-for="(item,index) in lithaSwipper" :key="index" style="width: 119rpx;height: 5rpx;"
              :class="lithaSwipperCard == index ? 'lithaswipperActive':'xiaoyuan'">
            </view>
          </view>
        </view>
        <view style="width: 659rpx;height: 289rpx;position: absolute;" :class="isIphoneX ? 'banner1624':'banner1334'"
          @click="handleBuy">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/litha-index-OA.png"
            mode="widthFix" style="width:100%;">
          </image>
        </view>
        <!-- 饮酒文案 -->
        <view style="width: 243rpx;height: 17rpx;" :class="isIphoneX ? 'yinjiu1624':'yinjiu1334'">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/litha-yinjiuKV.png"
            mode="widthFix" style="width:100%;">
          </image>
        </view>
      </view>
      <!-- 吸顶 -->
      <view class="navbar-wrap">
        <view class="column" :class="isFixedTop ?'fixed':''" id="navbars" :style="{top:fixTop + 'rpx'}">
          <view class="block" v-for="(item,index) in sheets" :key="index" @click="ToggleTab(item,index)">
            <image v-if="index == tabIndex" :src="item.activeImg" mode="widthFix" style="width: 76rpx;height: 33rpx;">
            </image>
            <image v-else :src="item.title" mode="widthFix" style="width: 76rpx;height: 33rpx;">
            </image>
            <view class="actives" v-if="index == tabIndex"></view>
          </view>
        </view>
      </view>
      <!-- 第三屏 -->
      <view class="node1">
        <!-- 橙色云彩 -->
        <view style="position: absolute;top: 3%;">
          <image style="width: 196rpx;height: 136rpx;"
            src="https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/橙色.png" mode="widthFix">
          </image>
        </view>
        <!-- 标题 -->
        <view class="litha-title">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/标题.png"
            mode="widthFix">
          </image>
        </view>
        <!-- 时间滑动 -->
        <view class="Slide-time" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
          <view class="slide-timeItem" v-for="(item,index) in newList" :key="index"
            v-if="index == currentCard">
            <image :src="item.newTime" mode="widthFix">
            </image>
          </view>
        </view>
        <!-- swipper -->
        <view class="uni-margin-wrap">
          <swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay"
            :interval="interval" :duration="duration" :current="currentCard" @change="changeCardSwipper">
            <swiper-item class="swiper-item" v-for="(item,index) in newList" :key="index">
              <image style="width: 100%;" :src="item.Imgsrc" mode="widthFix" @click="handleExplore(item,index)">
            </swiper-item>
          </swiper>
          <view style="width: 70rpx;height: 70rpx;z-index: 10;position: absolute;top: 50%;left: 66rpx;"
            @click="prevSwiper">
            <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/left-arrow.png"
              style="width: 100%;" mode="widthFix">
            </image>
          </view>
          <view style="width: 70rpx;height: 70rpx;position: absolute;top: 50%;right: 66rpx;" @click="nextSwiper">
            <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/right-arrow-1.png"
              style="width: 100%;" mode="widthFix">
            </image>
          </view>
        </view>
      </view>

      <view class="node2">
        <!-- 标志 -->
        <view class="cloud">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/Launch-HP-0706_03.png"
            mode="widthFix">
          </image>
        </view>
        <!-- 标题 -->
        <view class="cloud_title">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/标题222.png"
            mode="widthFix">
          </image>
        </view>
        <!-- 杂志阅读 -->
        <view class="cloud_read">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/magzine_0403.png"
            mode="widthFix" @click="handleRed">
          </image>
        </view>
      </view>
      <!-- 第二屏 -->
      <view class="node3">
        <!-- 标题 -->
        <view class="litha-title">
          <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/tiyan.png"
            mode="widthFix">
          </image>
        </view>
        <view style="width: 100%;display: flex;justify-content: center;margin-top: 80rpx;">
          <view style="width: 658rpx;height: 937rpx;" @click="experience">
            <image src="https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/0908/tansuo.png"
              mode="widthFix" style="width: 100%;height:937rpx;">
            </image>
          </view>
        </view>
        <!-- swipper -->
        <!-- <view class="uni-margin-wrap">
          <swiper class="swiper" :circular="circularspace" :indicator-dots="indicatorDotsSpace"
            :autoplay="autoplaySpace" :interval="interval" :duration="duration" :current="currentSpaceCard"
            indicator-active-color="#fff" @change="changeSpaceCardSwipper">
            <swiper-item class="swiper-item" v-for="(item,index) in spaceList" :key="index">
              <image style="width: 100%;" :src="item.Imgsrc" mode="widthFix" @click="handleSpace(item)">
            </swiper-item>
          </swiper>
          <view style="position: absolute;bottom: 3%;display: flex;">
            <view v-for="(item,index) in spaceList" :key="index" style="width: 13rpx;height: 14rpx;margin: 0 25rpx;"
              :class="currentSpaceCard == index ? 'xiaoyuanactive':'xiaoyuan'"></view>
          </view>
        </view> -->
        <!-- 盈钻 -->
        <view style="width: 100%;display: flex;justify-content: center;margin-top: 55rpx;height: 480rpx;"
          @click="handleBottomBanner">
          <image style="width: 658rpx;"
            src="https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/banner op2.png"
            mode="widthFix">
          </image>
        </view>
      </view>

    </view>
    <register-widget ref="registerWidgetRef" location="litha-index" />
  </view>
  </view>
</template>

<script>
  import TabBar from '../../components/common/tabbar';
  import NavBar from '../../components/common/navbar';
  import onlineService from '@/components/common/onlineService';
  import registerWidget from "@/components/register/register-widget.vue"
  import api from '@/api/api';
  import {
    lithLaunch
  } from '@/utils/litha_report';
  import {
    SYSTEM_INFO,
    MERCHANT_INFO,
    CUSTOMER_INFO
  } from '@/utils/constant';
  const app = getApp();
  export default {
    components: {
      tabBar: TabBar,
      navBar: NavBar,
      onlineService: onlineService,
      registerWidget
    },
    data() {
      return {
        customTabbar: 1,
        tabbarTimeout: true,
        nowPages: 'pages/litha/litha',
        showSale: true,
        isShowCustomNavBar: true,
        // 组件所需的参数
        navbarData: {
          showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
          title: 'litha主页', //导航栏 中间的标题
          newLogo: uni.getStorageInfoSync('storeLogo'),
          isTopFixed: true
        },
        isShowCustomNavBar: true,
        navbarInitTop: 0, //导航栏初始化距顶部的距离
        isFixedTop: false, //是否固定顶部
        tabIndex: -1,
        sheets: [{
            title: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/互动.png',
            activeImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/互动0.png'
          },
          {
            title: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/动态.png',
            activeImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/动态抢先.png'
          },
          {
            title: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/风味.png',
            activeImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/动态抢先1.png'
          },
          {
            title: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/tiyan1.jpg',
            activeImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/tiyan2.jpg'
          }
        ],
        indicatorDots: false,
        indicatorDotsSpace: false,
        autoplay: false,
        autoplaySpace: true,
        interval: 4000,
        duration: 500,
        circular: false,
        circularspace: true,
        scaleFactor: 0,
        windowHeight: 0,
        windowWidth: 0,
        screentHeight: 0,
        navigationHeight: 0,
        statusBarHeight: 0,
        tabBarHeight: 0,
        fixTop: 0,
        startX: 0,
        endX: 0,
        currentCard: 0,
        currentSpaceCard: 0,
        lithaSwipperCard: 0,
        isIphoneX: false,
        isMargin: false,
        CMSNewsIdentifier: 'lithaNewsUrl',
        CMSSpaceIdentifier: 'lithaSpaceSwiper',
        articleUrl: "",
        isShow: false,
        newList: [],
        spaceList: [],
        shareImageUrl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0804/share_0804.png', // 默认转发图片
        shareImage: '', // CMS动态转发图片
        shareTitle: '',
        CMSShareIdentifier: "lithaShare",
        pathTrackEn: '',
        pathTrackEp: '',
        trackList: [{
            event: 'Space',
            area: 'button/Space'
          },
          {
            event: 'Interaction',
            area: 'button/Interaction'
          },
          {
            event: 'News',
            area: 'button/News'
          },
          {
            event: 'Magazine',
            area: 'button/Magazine'
          },
        ],
        // litha
        lithaSwipper: [
          {
            swipperImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0916/litha-swipper16242_02.jpg',
            swipperImg1334: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0916/litha-swipper13342_03.jpg',
            swipperText: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0916/copy222.png',
            swipperBtn: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0916/copy11-btn (2).png',
            track:{
              name: "c_ebmp_draco_update_interaction_click_game",
              c_event_category_1: "game",
              c_click_area: "pic/Game菜单图片",
              c_link_pagename: "Game页面",
              c_link_path: "/pages/litha-launch/game",
              banner_name: "Game/立即体验"
            }
          },
          {
            swipperImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0918/litha-space162433_02.jpg',
            swipperImg1334: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0918/2litha-swipper13343_02.jpg',
            swipperText: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/0916/copy332 (1).png',
            swipperBtn: 'https://100000063-1252208446.file.myqcloud.com/images/litha/copy333.png',
            track: {
              name: "c_ebmp_draco_update_interaction_click_ar",
              c_event_category_1: "AR",
              c_click_area: "pic/AR菜单图片",
              c_link_pagename: "AR页面",
              c_link_path: "/pages/litha-launch/ar/index",
              banner_name: "AR/立即体验"
            }
          },
          {
            swipperImg: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/swipperItem1624_01.png',
            swipperImg1334: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/swipperItem1334_01.png',
            swipperText: 'https://100000063-1252208446.file.myqcloud.com/images/litha/swipperText1.png',
            swipperBtn: 'https://100000063-1252208446.file.myqcloud.com/images/litha/btn.png',
            track:{
              name: "c_ebmp_draco_update_invitation_click",
              c_event_category_1: "invitation",
              c_click_area: "pic/创建邀请函菜单图片",
              c_link_pagename: "Invitation页面",
              c_link_path: "/pages/litha-launch/invitation/index",
              banner_name: "订阅邀请函"
            }
          }
        ],
        refer_url: ""
      }
    },

    async onLoad(option) {
      await this.$onLaunched;
      let that = this;
      let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
      that.merchantId = merchantInfo.cloudMerchantId;
      that.storeId = merchantInfo.cloudMerchantStoreId;
      // 获取CMSNews配置信息
      that.getCMSPageNewsInfo(that.CMSNewsIdentifier, that.merchantId);
      // 获取CMS分享配置信息
      that.getCMSPageInfo(that.CMSShareIdentifier, that.merchantId);
      // 获取互动板块轮播
      that.getCMSPageSpaceInfo(that.CMSSpaceIdentifier, that.merchantId)

      that.pathTrackEn = option.en;
      that.pathTrackEp = option.ep;

      //  用户未登录 调用登录接口
      const customerInfo = uni.getStorageSync(CUSTOMER_INFO);
      if (!customerInfo || !customerInfo.openId) {
        await this.$commonFunction.commonLoginNew();
      }

      if (!!this.pathTrackEp) {
        let params = this.pathTrackEp.indexOf("'") !== -1 ? JSON.parse(this.pathTrackEp.replace(/'/g, '"')) : JSON
          .parse(this.pathTrackEp)
        if (params.c_link_path == '/pages/litha/litha') {
          params.c_link_path = params.c_link_path
        }
        getApp().commonClTrack(this.pathTrackEn, params);
        lithLaunch(this.pathTrackEn, params)

      }
    },


    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
      var that = this;

      let systemInfomations = wx.getSystemInfoSync()
      // 机型适配比例系数
      that.scaleFactor = 750 / systemInfomations.windowWidth
      // 当前机型-window高度
      that.windowHeight = systemInfomations.windowHeight * that.scaleFactor //rpx
      // 当前机型-window宽度
      that.windowWidth = systemInfomations.windowWidth * that.scaleFactor //rpx
      // 屏幕的高度
      that.screentHeight = systemInfomations.screenHeight * that.scaleFactor //rpx
      // 导航栏的高度
      that.navigationHeight = 40 * that.scaleFactor //rpx
      // 状态栏高度
      that.statusBarHeight = (systemInfomations.statusBarHeight) * that.scaleFactor //rpx
      // 底部tabBar的高度
      that.tabBarHeight = Math.abs(that.screentHeight - that.statusBarHeight - that.navigationHeight - that
        .windowHeight)

      that.fixTop = that.navigationHeight + that.statusBarHeight

      let ratio = that.windowWidth / that.windowHeight
      if (ratio < 750 / 1334) {
        that.isIphoneX = true;
      }

      if (that.navbarInitTop == 0) {
        //获取节点距离顶部的距离
        wx.createSelectorQuery().select('#navbars').boundingClientRect(function(rect) {
          if (rect && rect.top > 0) {
            var navbarInitTop = parseInt(rect.top);
            that.navbarInitTop = navbarInitTop
          }
        }).exec();
      }

      getApp().cl_tracker.track('mini_program_view', {
        path: '/pages/litha/litha',
        pageName: 'litha活动页',
        campaign: 'SZSH_LITHA_LAUNCH-2023'
      })
      lithLaunch("mini_program_view", {
        path: '/pages/litha/litha',
        pageName: 'litha活动页',
        campaign: 'SZSH_LITHA_LAUNCH-2023'
      })

      this.refer_url = uni.getStorageSync('refer_url');
      // 神策埋点
      that.$commonSensors.lithaTrack.crTrack("CampaignPageView", {
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": "Space",
        "refer_url":this.refer_url || ""
      })
    },

    /**
     * 监听页面滑动事件
     */
    onPageScroll: function(e) {
      let _s = this.tabIndex;
      if (this.isIphoneX) {
        if (e.scrollTop > 540 && e.scrollTop < 1199) {
          this.tabIndex = 1
        } else if (e.scrollTop > 1200 && e.scrollTop < 1999) {
          this.tabIndex = 2
        } else if (e.scrollTop > 2000) {
          this.tabIndex = 3
        }else{
          this.tabIndex = -1
        }
      } else {
        if (e.scrollTop > 370 && e.scrollTop < 839) {
          this.tabIndex = 1
        } else if (e.scrollTop > 840 && e.scrollTop < 1599) {
          this.tabIndex = 2
        } else if (e.scrollTop > 1600) {
          this.tabIndex = 3
        }else{
          this.tabIndex = -1
        }
      }

      if(this.tabIndex != _s){
        // 神策埋点
        this.$commonSensors.lithaTrack.crTrack("CampaignPageView", {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": this.tabIndex == -1 ? "Space" : this.trackList[this.tabIndex]?.event,
          "refer_url":this.refer_url || ""
        })
      }

      let navbarHeight = getApp().globalData.navBarHeight;
      if (e.scrollTop > navbarHeight) {
        this.navbarData.isTopFixed = false;
      } else {
        this.navbarData.isTopFixed = true;
      }

      var that = this;
      var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度

      //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
      var isSatisfy = scrollTop >= that.navbarInitTop ? true : false;
      //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
      if (that.isFixedTop === isSatisfy) {
        return false;
      }

      that.isFixedTop = isSatisfy
    },
    methods: {
      // 锚点定位
      ToggleTab(item, index) {
        if (index != 0) {
          this.tabIndex = index
        }
        let className = String('.node' + index);
        uni.createSelectorQuery().select(className).boundingClientRect(con => { // 获取点击要跳转的锚点信息
          uni.createSelectorQuery().select(".Public-con").boundingClientRect(res => { // 获取根元素要滑动的元素
            uni.pageScrollTo({
              selector: ".Public-con", // 滑动的元素
              // duration: 1000, //过渡时间
              scrollTop: con.top - res.top, //到达距离顶部的top值
            });
          }).exec();
        }).exec();



        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'browse',
          "c_event_category_2": this.trackList[index].event,
          "c_click_area": this.trackList[index].area
        }
        getApp().commonClTrack('c_ebmp_draco_update_click_tab', Params)
        lithLaunch("c_ebmp_draco_update_click_tab", Params)

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("CampaignPageClick", {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": this.trackList[index].event,
          "button_name": "切换"+this.trackList[index].event
        })
      },

      // 即刻探索
      experience() {
        uni.navigateTo({
          url: '/pages/litha-launch/space'
        })

        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'browse',
          "c_event_category_2": 'Space',
          "c_click_area": 'Space入口',
          "c_link_pagename": 'Space页面',
          "c_link_path": "/pages/litha-launch/space",
          "c_material_name": "",
          "c_material_id": ""

        }
        getApp().commonClTrack('c_ebmp_draco_update_click_block', Params)
        lithLaunch("c_ebmp_draco_update_click_block", Params)
        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("CampaignPageClick", {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": "Space",
          "button_name": "精彩回顾"
        })
      },

      // 即刻品鉴
      handleBuy() {
        let url = '/pages/item/item?id=98690&valueId=20136&c_from=button'
        uni.navigateTo({
          url: url
        })

        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'browse',
          "c_event_category_2": 'Store',
          "c_click_area": 'button/立即加购',
          "c_link_pagename": 'Litha商品详情',
          "c_link_path": url,
        }

        wx.reportEvent("litha_click_buy_now", {
          "eventdata": JSON.stringify(Params)
        })
        getApp().commonClTrack('c_ebmp_draco_update_click_buy_now', Params)
      },

      // 探索
      handleExplore(item, index) {
        if (item && item.newLink) {
          uni.navigateTo({
            url: `/pages/litha-launch/official/official?src= ${encodeURIComponent(JSON.stringify(item.newLink))}`
          })

          let Params = {
            "campaign": 'SZSH_LITHA_LAUNCH-2023',
            "c_event_category_1": 'browse',
            "c_event_category_2": 'News',
            "c_click_area": 'News入口',
            "c_link_pagename": '公众号推文',
            "c_link_path": "",
            "c_material_name": item.trackName,
            "c_material_id": ""

          }
          getApp().commonClTrack('c_ebmp_draco_update_click_block', Params)
          lithLaunch("c_ebmp_draco_update_click_block", Params)

          // 神策埋点
          this.$commonSensors.lithaTrack.cTrack("CampaignPageClick", {
            "campaign": 'SZSH_LITHA_LAUNCH-2023',
            "first_module_name": 'News',
            "button_name": "点击探索"
          })
        }
      },

      // 互动模块
      handleSpace(item) {
        let name = item.newLink == '/pages/litha-launch/ar/index' ? 'c_ebmp_draco_update_interaction_click_ar' :
          'c_ebmp_draco_update_interaction_click_game'
        if (item.newLink) {
          let Params = {
            "campaign": 'SZSH_LITHA_LAUNCH-2023',
            "c_event_category_1": item.newLink == '/pages/litha-launch/ar/index' ? 'AR' : 'game',
            "c_event_category_2": 'Interaction',
            "c_click_area": item.newLink == '/pages/litha-launch/ar/index' ? 'pic/AR菜单图片' : 'pic/Game菜单图片',
            "c_link_pagename": item.newLink == '/pages/litha-launch/ar/index' ? 'AR页面' : 'Game页面',
            "c_link_path": item.newLink
          }
          getApp().commonClTrack(name, Params)
          wx.reportEvent(name, {
            "eventdata": JSON.stringify(Params)
          })
          uni.navigateTo({
            url: item.newLink
          })
        }
      },

      // 阅读
      handleRed() {
        uni.navigateTo({
          url: '/pages/litha-launch/magazine/index'
        })
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'browse',
          "c_event_category_2": 'Magazine',
          "c_click_area": 'Magazine入口',
          "c_link_pagename": 'Magazine页面',
          "c_link_path": "/pages/litha-launch/magazine/index",
          "c_material_name": "",
          "c_material_id": ""
        }
        getApp().commonClTrack('c_ebmp_draco_update_click_block', Params)
        lithLaunch("c_ebmp_draco_update_click_block", Params)

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("CampaignPageClick", {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Magazine',
          "button_name": "点击探索"
        })
      },

      // 探索AR
      handleExploreAr() {
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'AR',
          "c_event_category_2": 'Interaction',
          "c_click_area": 'pic/AR菜单图片',
          "c_link_pagename": 'AR页面',
          "c_link_path": '/pages/litha-launch/ar/index'
        }
        getApp().commonClTrack('c_ebmp_draco_update_interaction_click_ar', Params)
        wx.reportEvent('c_ebmp_draco_update_interaction_click_ar', {
          "eventdata": JSON.stringify(Params)
        })
        uni.navigateTo({
          url: '/pages/litha-launch/ar/index'
        })
      },

      // 底部banner购买
      handleBottomBanner() {
        let url = '/pages/item/item?id=98690&valueId=20136&c_from=banner'
        uni.navigateTo({
          url: url
        })
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'browse',
          "c_event_category_2": 'Store',
          "c_click_area": 'button/立即加购banner',
          "c_link_pagename": 'Litha商品详情',
          "c_link_path": url,
        }
        wx.reportEvent("litha_click_bottom_banner", {
          "eventdata": JSON.stringify(Params)
        })
        getApp().commonClTrack('c_ebmp_draco_update_click_bottom_banner', Params)
      },

      // 滑动新闻卡片
      changeCardSwipper(e) {
        this.currentCard = e.detail.current
      },

      changeSpaceCardSwipper(e) {
        this.currentSpaceCard = e.detail.current
      },

      changeLithaSwipper(e) {
        this.lithaSwipperCard = e.detail.current
      },

      // 首屏轮播跳转
      handleSwipperBtn(index) {
        const _trackObj = this.lithaSwipper[index].track;
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": _trackObj.c_event_category_1,
          "c_event_category_2": 'Interaction',
          "c_click_area": _trackObj.c_click_area,
          "c_link_pagename": _trackObj.c_link_pagename,
          "c_link_path": _trackObj.c_link_path
        }

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("BannerClick", {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "banner_name": _trackObj.banner_name,
          "banner_rank": index + 1,
          "banner_position": "顶部"
        })

        getApp().commonClTrack(_trackObj.name, Params)
        wx.reportEvent(_trackObj.name, {
          "eventdata": JSON.stringify(Params)
        })

        uni.navigateTo({
          url: _trackObj.c_link_path
        })
        // let name = index == 0 ? 'c_ebmp_draco_update_invitation_click' : index == 1 ?
        //   'c_ebmp_draco_update_interaction_click_game' : 'c_ebmp_draco_update_interaction_click_ar'
        // let Params = {
        //   "campaign": 'SZSH_LITHA_LAUNCH-2023',
        //   "c_event_category_1": index == 0 ? 'invitation' : index == 1 ? 'game' : 'AR',
        //   "c_event_category_2": 'Interaction',
        //   "c_click_area": index == 0 ? 'pic/创建邀请函菜单图片' : index == 1 ? 'pic/Game菜单图片' : 'pic/AR菜单图片',
        //   "c_link_pagename": index == 0 ? 'Invitation页面' : index == 1 ? 'Game页面' : 'AR页面',
        //   "c_link_path": index == 0 ? '/pages/litha-launch/invitation/index' : index == 1 ?
        //     '/pages/litha-launch/game' : '/pages/litha-launch/ar/index'
        // }

        // // 神策埋点
        // this.$commonSensors.lithaTrack.cTrack("BannerClick", {
        //   "campaign": 'SZSH_LITHA_LAUNCH-2023',
        //   "banner_name": index == 0 ? "订阅邀请函" : index == 1 ? "Game/立即体验" : "AR/立即体验",
        //   "banner_rank": index + 1,
        //   "banner_position": "顶部"
        // })

        // getApp().commonClTrack(name, Params)
        // wx.reportEvent(name, {
        //   "eventdata": JSON.stringify(Params)
        // })

        // if (index == 0) {
        //   uni.navigateTo({
        //     url: '/pages/litha-launch/invitation/index'
        //   })
        // } else if (index == 1) {
        //   uni.navigateTo({
        //     url: '/pages/litha-launch/game'
        //   })
        // } else {
        //   uni.navigateTo({
        //     url: '/pages/litha-launch/ar/index'
        //   })
        // }
      },

      onTouchStart(e) {
        let _p = e.changedTouches || [];
        if (_p && _p[0]) {
          const _tp = _p[0];
          this.startX = _tp.clientX;
        }
      },
      onTouchMove(e) {},
      onTouchEnd(e) {
        let _p = e.changedTouches || [];
        if (_p && _p[0]) {
          const _tp = _p[0];
          this.endX = _tp.clientX || 0;
          const _tn = this.endX - this.startX;
          if (_tn > 0 && Math.abs(_tn) >= 10) {
            if (this.currentCard != 0) {
              this.currentCard = this.currentCard - 1
            }
          } else if (_tn < 0 && Math.abs(_tn) >= 10) {
            if (this.currentCard != this.newList.length - 1) {
              this.currentCard = this.currentCard + 1
            }
          }
        }
      },

      //上一页
      prevSwiper() {
        let current = this.currentCard;
        let ncurrent = current > 0 ? current - 1 : current;
        this.currentCard = ncurrent
      },
      // 下一页
      nextSwiper() {
        let current = this.currentCard;
        let ncurrent = current < (this.newList.length - 1) ? current + 1 : current;
        this.currentCard = ncurrent
      },


      /**
       * CMS配置news图及链接
       */
      getCMSPageNewsInfo: async function(identifier, merchantId) {
        let that = this;
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
        let mt = '1.0';
        const json = await api.getConfigDetail({
          method: 'POST',
          query: {
            identifier: identifier,
            merchantId: merchantId || merchantInfo.cloudMerchantId,
            storeId: merchantInfo.cloudMerchantStoreId,
            mt: mt
          }
        });
        if (json.data.code === 1000 && json.data.data !== null) {
          let configData = json.data.data;
          let cmsConfigData = {};
          if (this.preview) {
            cmsConfigData = JSON.parse(configData.preview);
          } else {
            cmsConfigData = JSON.parse(configData.content);
            let contents = configData.contents;
            for (let index in contents) {
              let startTime = contents[index].startTime;
              startTime = startTime.substring(0, 19);
              startTime = startTime.replace(/-/g, '/');
              let startTimeTimestamp = new Date(startTime).getTime();
              if (startTimeTimestamp <= new Date().getTime()) {
                cmsConfigData = JSON.parse(contents[index].content);
                break;
              }
            }
          }
          let CMSItembanner = cmsConfigData,
            CMSItembannerImage = cmsConfigData[0];
          let newInfo = {}
          CMSItembannerImage[0].data.child.forEach((item, index) => {
            // 设置轮播默认位置
            if (item.dataPosition) {
              this.currentCard = index
            }
            item.child.forEach((itm, idx) => {
              if (itm.dataName == 'newsImg') {
                newInfo.Imgsrc = itm.src
              }
              if (itm.dataName == 'newsLink') {
                newInfo.newLink = itm.text
              }
              if (itm.dataName == 'newsTime') {
                newInfo.newTime = itm.src
              }
              if (itm.dataName == 'newTrack') {
                newInfo.trackName = itm.text
              }
            })
            that.newList.push(newInfo)
            newInfo = {}
          })
        }
      },

      /**
       * CMS配置news图及链接
       */
      getCMSPageSpaceInfo: async function(identifier, merchantId) {
        let that = this;
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
        let mt = '1.0';
        const json = await api.getConfigDetail({
          method: 'POST',
          query: {
            identifier: identifier,
            merchantId: merchantId || merchantInfo.cloudMerchantId,
            storeId: merchantInfo.cloudMerchantStoreId,
            mt: mt
          }
        });
        if (json.data.code === 1000 && json.data.data !== null) {
          let configData = json.data.data;
          let cmsConfigData = {};
          if (this.preview) {
            cmsConfigData = JSON.parse(configData.preview);
          } else {
            cmsConfigData = JSON.parse(configData.content);
            let contents = configData.contents;
            for (let index in contents) {
              let startTime = contents[index].startTime;
              startTime = startTime.substring(0, 19);
              startTime = startTime.replace(/-/g, '/');
              let startTimeTimestamp = new Date(startTime).getTime();
              if (startTimeTimestamp <= new Date().getTime()) {
                cmsConfigData = JSON.parse(contents[index].content);
                break;
              }
            }
          }
          let CMSItembanner = cmsConfigData,
            CMSItembannerImage = cmsConfigData[0];
          let newInfo = {}
          CMSItembannerImage[0].data.child.forEach((item, index) => {
            item.child.forEach((itm, idx) => {
              if (itm.dataName == 'spaceImg') {
                newInfo.Imgsrc = itm.src
              }
              if (itm.dataName == 'spaceLink') {
                newInfo.newLink = itm.text
              }
            })
            that.spaceList.push(newInfo)
            newInfo = {}
          })
        }
      },

      getIsIpx() {
        return this.$store.state.isIpx || getApp().globalData.isIpx;
      },

      /**
       * CMS配置页面 转发背景图
       */
      getCMSPageInfo: async function(identifier, merchantId) {
        let that = this;
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
        let mt = '1.0';
        const json = await api.getConfigDetail({
          method: 'POST',
          query: {
            identifier: identifier,
            merchantId: merchantId || merchantInfo.cloudMerchantId,
            storeId: merchantInfo.cloudMerchantStoreId,
            mt: mt
          }
        });
        if (json.data.code === 1000 && json.data.data !== null) {
          let configData = json.data.data;
          let cmsConfigData = {};
          if (this.preview) {
            cmsConfigData = JSON.parse(configData.preview);
          } else {
            cmsConfigData = JSON.parse(configData.content);
            let contents = configData.contents;
            for (let index in contents) {
              let startTime = contents[index].startTime;
              startTime = startTime.substring(0, 19);
              startTime = startTime.replace(/-/g, '/');
              let startTimeTimestamp = new Date(startTime).getTime();
              if (startTimeTimestamp <= new Date().getTime()) {
                cmsConfigData = JSON.parse(contents[index].content);
                break;
              }
            }
          }
          let CMSItembanner = cmsConfigData,
            CMSItembannerImage = cmsConfigData[0];
          that.shareImage = CMSItembannerImage[0].data.child[0].src || "";
          that.shareTitle = CMSItembannerImage[0].data.child[1] ? CMSItembannerImage[0].data.child[1].text : "";
        }
      },

      onShareAppMessage: async function(res) {
        let that = this
        if (this.shareImage == '' || this.shareTitle) {
          await that.getCMSPageInfo(that.CMSShareIdentifier, that.merchantId);
        }
        if (res.from === 'button') {} else {
          this.$EFSTracking.trackingAction('SHARE_CARD', res.from, {});
        }

        let imageUrl = this.shareImage || this.shareImageUrl
        let path = '/pages/litha/litha'
        let title = this.shareTitle ? this.shareTitle : uni.getStorageSync('storeName') || 'THE MACALLAN EBOUTIQUE麦卡伦'
        this.$commonSensors.sensorsPageShare()
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return this.$commonFunction.commonShare(res, title, path, imageUrl)

      },
      onShareTimeline() {
				let title = this.shareTitle ? this.shareTitle : uni.getStorageSync('storeName') || 'THE MACALLAN EBOUTIQUE麦卡伦'
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return {
          title: title,
          query: '/pages/litha/litha',
          imageUrl: this.shareImage
        };
      },
    }
  }
</script>

<style lang="less" scoped>
  .Public-account {
    width: 100vw;
    box-sizing: border-box;
    padding-bottom: 60rpx;

    .Public-con {
      width: 100%;
    }

    .palingenesis {
      width: 100%;
      height: 100%;
      position: relative;
      margin-bottom: 60rpx;
      display: flex;
      justify-content: center;
    }

    .Public-qrcode {
      display: block;
      width: 100%;
      height: 100%;
      // height: 1511rpx;
    }

    // .Public-title {
    //   width: 471rpx;
    //   height: 100rpx;
    //   margin-top: 40rpx;
    // }
  }


  .navbar-wrap {
    width: 100%;
    height: 75rpx;
    margin-top: 20rpx;
  }

  .column {
    width: 100%;
    height: 75rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    // top: 0;
    // left: 0;
    z-index: 100;
  }

  .navbar-wrap .column.fixed {
    position: fixed;
    background-color: #fff;
  }

  .columnss {
    width: 100%;
    height: 134rpx;
  }

  /* 以下的代码不重要 */

  .navbar-wrap .column .block {
    width: 25%;
    height: 65rpx;
    line-height: 65rpx;
    text-align: center;
    font-size: 20px;
    color: #737373;
    letter-spacing: 1px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // .navbar-wrap .column .block::after {
  //   content: "";
  //   width: 60%;
  //   height: 3px;
  //   border-radius: 2px;
  //   position: absolute;
  //   bottom: 0;
  //   left: 50%;
  //   transform: translateX(-50%);
  //   background: transparent;
  // }

  .node0 {
    width: 100%;
    height: 1536rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  // .node01624 {
  //   background: url('https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/litha-index1624.jpg');
  //   background-size: 100% 100%;
  // }

  // .node01334 {
  //   background: url('https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/litha-index1334.jpg');
  //   background-size: 100% 100%;
  // }

  .banner1624 {
    position: absolute;
    top: 77%;
  }

  .banner1334 {
    position: absolute;
    top: 73%;
  }

  .yinjiu1624 {
    position: absolute;
    bottom: 3%;
    right: 20rpx;
  }

  .yinjiu1334 {
    position: absolute;
    bottom: 2%;
    right: 20rpx;
  }

  .node3 {
    width: 100%;
    height: 1330rpx;
    // background: url('https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/Launch-HP-WIP_03bg.jpg');
    // background-size: 100% 100%;
    // margin-top: 60rpx;
    box-sizing: border-box;
    // padding-top: 75rpx;
    margin-top: 153rpx;
    position: relative;

    .litha-title {
      width: 100%;
      height: 120rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 427rpx;
        height: 99rpx;
      }
    }
  }

  .node1 {
    width: 100%;
    height: 1330rpx;
    // background: url('https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/Launch-HP-WIP_03bg.jpg');
    // background-size: 100% 100%;
    // margin-top: 60rpx;
    box-sizing: border-box;
    padding-top: 75rpx;
    position: relative;

    .litha-title {
      width: 100%;
      height: 120rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 354rpx;
        height: 100rpx;
      }
    }

    .Slide-time {
      width: 100%;
      height: 78rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;

      .slide-timeItem {
        width: 100%;
        height: 50rpx;

        image {
          display: block;
          width: 100%;
          height: 100%;
        }
      }


    }
  }

  .node2 {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .cloud {
      position: absolute;
      right: 0;
      top: 0;

      image {
        display: block;
        width: 271rpx;
        height: 256rpx;
      }
    }

    .cloud_title {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 184rpx;

      image {
        display: block;
        width: 287rpx;
        height: 99rpx;
      }
    }

    .cloud_read {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 85rpx;
      position: relative;

      image {
        display: block;
        width: 658rpx;
        height: 940rpx;
      }
    }
  }

  .experience-btn {
    width: 240rpx;
    height: 75rpx;
    position: absolute;
    bottom: 5%;
  }

  .explore {
    width: 375rpx;
    height: 90rpx;
    position: absolute;
    bottom: 18%;
  }

  .read {
    width: 380rpx;
    height: 90rpx;
    position: absolute;
    bottom: 18%;
  }

  .activeImg {
    width: 77rpx;
  }


  .uni-margin-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 60rpx;
    position: relative;
  }

  .swiper {
    width: 660rpx;
    height: 940rpx;
  }


  .swiper-item {
    display: block;
    height: 940rpx;
    line-height: 300rpx;
    text-align: center;
    border-radius: 16rpx;
    overflow: hidden;
    // box-shadow: 0rpx 0rpx 12.22rpx 0.78rpx rgba(3, 3, 3, .2);
  }

  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }

  .uni-margin-wraps {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // margin-top: 60rpx;
    position: relative;
  }

  .litha-swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-items {
    display: block;
    height: 100%;
    line-height: 300rpx;
    text-align: center;
    // border-radius: 16rpx;
    overflow: hidden;
    display: flex;
    justify-content: center;
  }

  .swipperbtn1624 {
    width: 376rpx;
    height: 90rpx;
    position: absolute;
    top: 65%;
  }

  .swipperbtn1334 {
    width: 376rpx;
    height: 90rpx;
    position: absolute;
    top: 52%;
  }

  .swipperText1624 {
    width: 343rpx;
    height: 121rpx;
    position: absolute;
    top: 58%;
  }

  .swipperText1334 {
    width: 343rpx;
    height: 121rpx;
    position: absolute;
    top: 43%;
  }

  .swipper-uto {
    width: 357rpx;
    height: 1px;
    position: absolute;
    display: flex;
  }


  .uni-common-mt {
    margin-top: 60rpx;
    position: relative;
  }

  .info {
    position: absolute;
    right: 20rpx;
  }

  .uni-padding-wrap {
    width: 550rpx;
    padding: 0 100rpx;
  }

  .actives {
    // background-color: aliceblue;
    position: absolute;
    bottom: 62rpx;
    width: 77rpx;
    height: 12rpx;
    background-image: url(https://100000063-1252208446.file.myqcloud.com/images/litha/active_icon.png);
    background-size: 100% 100%;
    bottom: -7%;
  }



  .lithaswipperActive {
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/actived.jpg');
    background-size: 100% 100%;
  }

  .lithbtn1624 {
    top: 43.5%;
  }

  .lithbtn1334 {
    top: 34.5%;
  }

  .activebg {
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/invitation/active-bg.png');
    background-size: 100% 100%;
  }
</style>
